<template>
  <Row :gutter="[20, 20]" class="view-page">
    <Col :span="24">
      <div class="choose-year">{{ currentYear }} 年节假日信息</div>
    </Col>
    <Col :span="6" v-for="item in calendarDataList" :key="item.month">
      <div class="title-month">{{ item.month }}</div>
      <!-- 星期 -->
      <ul class="weekdays">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      <!-- 日期 -->
      <ul class="days">
        <li :style="{ width: `${14.2 * (item.xq - 1)}%` }"></li>
        <li
          :class="{ active: date.isNotWork == 1 }"
          v-for="(date, index) in item.list"
          :key="item.month + '-' + index"
        >
          {{ index < 9 ? `0${index + 1}` : index + 1 }}
        </li>
      </ul>
    </Col>
  </Row>
</template>

<script setup lang="tsx">
import { reactive } from 'vue';
import { Col, Row } from 'ant-design-vue';
import { getcalendarList } from '@/api/base';

const currentYear = new Date().getFullYear();
const calendarDataList: any = reactive([
  {
    month: '一月',
    months: 1,
    xq: 0,
    list: [],
  },
  {
    month: '二月',
    months: 2,
    xq: 0,
    list: [],
  },
  {
    month: '三月',
    months: 3,
    xq: 0,
    list: [],
  },
  {
    month: '四月',
    months: 4,
    xq: 0,
    list: [],
  },
  {
    month: '五月',
    months: 5,
    xq: 0,
    list: [],
  },
  {
    month: '六月',
    months: 6,
    xq: 0,
    list: [],
  },
  {
    month: '七月',
    months: 7,
    xq: 0,
    list: [],
  },
  {
    month: '八月',
    months: 8,
    xq: 0,
    list: [],
  },
  {
    month: '九月',
    months: 9,
    xq: 0,
    list: [],
  },
  {
    month: '十月',
    months: 10,
    xq: 0,
    list: [],
  },
  {
    month: '十一月',
    months: 11,
    xq: 0,
    list: [],
  },
  {
    month: '十二月',
    months: 12,
    xq: 0,
    list: [],
  },
]);
const init = async () => {
  const res: any = await getcalendarList({ year: currentYear });
  for (let i = 0; i < calendarDataList.length; i++) {
    // 获取每月天数
    const days = new Date(currentYear, calendarDataList[i].months, 0).getDate();
    const monthsDate = res.data.splice(0, days);
    calendarDataList[i].list = monthsDate;
    calendarDataList[i].xq = monthsDate[0].weekDay || 7;
  }
};
init();
</script>
<style lang="css" scoped>
.view-page {
  text-align: center;
  li {
    padding: 10px 0;
  }
}
.choose-year {
  font-size: 25px;
}
.title-month {
  font-size: 18px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-image: linear-gradient(
    -225deg,
    rgba(105, 130, 128, 1) 0%,
    rgb(105, 130, 128) 100%
  );
}
.weekdays {
  display: flex;
  li {
    list-style: none;
    flex: 1;
  }
}
.days {
  display: flex;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.24);
  min-height: calc(100% - 68px);
  align-content: flex-start;
  li {
    width: 14.2%;
    position: relative;
  }
  .active {
    color: #ff4444;
    &::before {
      content: '休';
      position: absolute;
      right: 0px;
      top: 0px;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      color: #fff;
      font-size: 12px;
      background-color: #ff4444;
    }
  }
}
</style>
